<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    #txt{width: 200px;height:200px;margin: 0 auto;padding: 0;display: block;text-align: center;font-size: 50px;}
    #btn{display: block;margin: 10px auto;font-size: 30px;width: 200px;}
  </style>
</head>
<body>
  <input type="text" disabled id="txt" value="5">
  <input type="button" id="btn" value="开始">
</body>
<script>

  var btn = document.getElementById("btn");
  var txt = document.getElementById("txt");

  btn.onclick = function(){
    if(state === "开始"){
      action();
    }else if(state === "暂停"){
      stop();
    }else if(state === "复位"){
      reset();
    }
  }

  
  // 开始：初始或复位或暂停之后
  // 暂停：开始之后，终止之前
  // 复位：终止之后
  
  // 初始值（倒计时的计算）
  var num = txt.value-0;
  // 初始值（用于复位功能）
  var start = txt.value-0;
  
  // 表示下一次的功能
  var state = "开始";

  // 用来保存计时器的唯一标志
  var t;

  // 开始功能
  function action(){
    // 防止计时器重复开启：如果计时器已经存在，直接结束本功能
    if( t ) return;
    // 开启计时器
    t = setInterval(function(){
      // 判断数字是否到终点
      if(num <= 1){
        // 到终点，清除计时器
        clearInterval(t);
        // 将计时器的标志初始化，下次才能继续开启
        t = undefined;
        // 提示文字改为结束了
        txt.value = "结束了";
        // 将下次要执行的功能和按钮文字，改为复位
        state = "复位";
        btn.value = "复位";
      }else{
        // 没到终点，正常--，设置到容器
        num--;
        txt.value = num;
      }
    }, 1000);
    // 开始功能执行完毕，将下次要执行的功能和按钮文字，改为暂停
    state = "暂停";
    btn.value = "暂停";
  }
  // 暂停功能
  function stop(){
    // 清除计时器
    clearInterval(t);
    // 将计时器的标志初始化，下次才能继续开启
    t = undefined;
    // 暂停功能执行完毕，将下次要执行的功能和按钮文字，改为开始
    state = "开始";
    btn.value = "开始";
  }
  // 复位功能
  function reset(){
    // 将页面容器内容复位
    txt.value = start;
    // 将倒计时计算的值复位
    num = start;
    // 复位功能执行完毕，将下次要执行的功能和按钮文字，改为开始
    btn.value = "开始";
    state = "开始";
  }

  
</script>
</html>